import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { Input, message, Radio, Spin } from 'antd';
import OperModal from '@/component/common/OperModal';

import MModal from '@/component/common/MModal';
const RadioGroup = Radio.Group;
const LabelItem = OperModal.LabelItem;
import AlStore from '@/store/Alliance';

import { update_withdraw_account, withdraw_account } from '@/constants/ApiTypes';
import ApiHelper from '@/store/ApiHelper';

class CorporateModal extends Component {
    static propTypes = {
        visible: PropTypes.bool,
        onClose: PropTypes.func.isRequired
    };
    defaultState = {
        account_name: '',
        bank_deposit: '',
        bank_no: '',
        account_type: "2",
        spinning: true
    };
    state = this.defaultState;
    submit = async () => {
        const { bank_deposit, bank_no, account_type } = this.state;
        if (bank_deposit == '') {
            this.input_bank_deposit.focus();
            return message.warn('请输入开户行！', 1.5);
        }
        if (bank_no == '') {
            this.input_bank_no.focus();
            return message.warn('请输入银行卡号！', 1.5);
        }

        const data = { bank_deposit, bank_no, account_type };
        const result = await ApiHelper.requestPost(update_withdraw_account, data);
        if (result.status) {
            MModal.success({ title: '操作成功', content: '修改成功', duration: 1.5 });
            this.getWithdrawAccount(account_type);
            //重新获取联盟店信息
            AlStore.getInfo();
        } else {
            MModal.success({ title: '错误提示', content: result.info });
        }
    };
    inputOnchange = e => {
        this.setState({
            [e.target.name]: e.target.value
        });
    };
    selectAccountType = e => {
        this.setState({ ...this.defaultState, account_type: e.target.value });
        this.getWithdrawAccount(e.target.value);
    };
    getWithdrawAccount = async account_type => {
        const data = {
            account_type: account_type
        };
        this._setState({ spinning: true });
        const result = await ApiHelper.requestPost(withdraw_account, data);
        this._setState({ spinning: false });
        if (result.status) {
            const info = result.info;
            if (info) {
                this._setState({
                    bank_deposit: info.bank_deposit,
                    bank_no: info.account
                });
            }
        } else {
            MModal.success({ title: '错误提示', content: '获取提现账户失败！' });
        }
    };
    async componentDidMount() {
        this._isMounted = true;
    }
    componentWillUnmount() {
        this._isMounted = false;
    }
    //fix异步
    _setState = state => {
        if (this._isMounted) this.setState(state);
    };
    componentWillReceiveProps(nextProps) {
        if (nextProps.visible) {
            this.setState(this.defaultState);
            this.getWithdrawAccount(this.state.account_type);
        }
    }
    render() {
        const { visible, onClose } = this.props;
        const { bank_deposit, bank_no, account_type } = this.state;
        const inputStyle = { width: 150 };
        return (
            <OperModal visible={visible} onClose={onClose} title="修改提现账号" width={320} height={200} onOk={this.submit}>
                <Spin tip="loading" spinning={this.state.spinning} delay={150}>
                    <LabelItem label="账户类型" align="right" width={75}>
                        <RadioGroup onChange={this.selectAccountType} value={account_type}>
                            <Radio value="2">法人银行卡</Radio>
                            <Radio value="3">对公账号</Radio>
                        </RadioGroup>
                    </LabelItem>
                    <LabelItem label="开户行" align="right" width={75}>
                        <Input name="bank_deposit" type="text" ref={input => this.input_bank_deposit = input} value={bank_deposit} onChange={this.inputOnchange} style={inputStyle} />
                    </LabelItem>
                    <LabelItem label="银行卡号" align="right" width={75}>
                        <Input name="bank_no" type="text" ref={input => this.input_bank_no = input} value={bank_no} onChange={this.inputOnchange} style={inputStyle} />
                    </LabelItem>
                </Spin>
            </OperModal>
        );
    }
}

export default CorporateModal;